<template>
  <dialog_item :dialogTitle="$t('select_user')" @onBtnDialogClick="onBtnDialogClick" :visible.sync="dialogVisible" :appendBody="true" dialogClass="user-selectbox dialogHeight" :isShowConfirmBtn="true">
    <el-container>
      <el-row :gutter="24" class="width100 margin0">
        <el-col :span="6" class="border-r">
          <el-tree
            node-key="id"
            :props="{
                  label: 'name',
                  children: 'zones',
                  isLeaf: 'leaf'
                }"
            :load="loadNode"
            @node-click="onNodeClick"
            :default-expanded-keys="defaultExpandedKeys"
            :expand-on-click-node="false"
            lazy
            :key="timer"
          >
          <span class="custom-tree-node over-ellipsis" slot-scope="{ node, data }">
            <span :title="data.name">{{ node.label }}</span>
          </span>
          </el-tree>
        </el-col>
        <el-col :span="18" v-show="seen" class="paddingRight0">
          <el-form :inline="true" :model="searchdata" class="form-inline searchForm paddingT0" size="mini"  @submit.native.prevent>
            <el-form-item  class="paddingLeft0">
              <el-input v-model="searchdata.data.searchWord" :placeholder="$t('user_name')+'/'+$t('loginno')" @keyup.enter.native="searchTableData"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="searchTableData" type="primary" plain >{{$t('query')}}</el-button>
              <el-button @click="resetSearchTableData">{{$t('reset')}}</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="tableData.datas" 
            @current-change="deptuserRowClick" max-height="350" highlight-current-row
            size="small">
            <el-table-column prop="name" :label="$t('username')"></el-table-column>
            <el-table-column prop="loginno" :label="$t('loginno')"></el-table-column>
            <el-table-column prop="email" :label="$t('email')"></el-table-column>
            <el-table-column prop="telephone" :label="$t('tel')"></el-table-column>
            <el-table-column prop="status" :label="$t('status')">
             <template slot-scope="scope">
              <span>{{scope.row.status==0?$t('resign'):$t('on_job')}}</span>
            </template>
            </el-table-column>

          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="searchTableData"
            :current-page.sync="searchdata.currpage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchdata.pagelines"
            layout="prev, pager, next, total, sizes"
            background
            :total="tableData.rowCount?tableData.rowCount:0"
          ></el-pagination>
        </el-col>
      </el-row>
        
    </el-container>
    </dialog_item>
</template>

<script>
export default {
  props: ["detail","visible","type"],

  data() {
    return {
      defaultExpandedKeys: [],
      node:[],
      resolve:function(){},
      isFirst:true,
      roleData: {},
      onlineData: {},
      searchdata: {
        domainid: this.detail.domainsId,
        departmentid: "",
        currpage: 1,
        pagelines: 10,
        orderby: "",
        data:{
          searchWord: "",
        }
      },
      tableData: [],
      tableDatabyRole: [],
      searchall: false,
      seen: false,
      checkUser:[],
      timer:''
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  created() {
    this.seen=true;
    this.searchTableData();
    this.loadNode(this.node,this.resolve);
  },
  methods: {
    onBtnDialogClick(name){
      if(name=='confirm'){
        this.onOk()
      }
    },
    onOk() {
      this.dialogVisible = false;
      this.$emit("select-ok", this.checkUser);
    },
    onCancel() {
      this.dialogVisible = false;
    },
    deleteProxyUser(){
      // this.onOk([]);
      this.checkUser[0]={};
      this.$refs.dept.setCurrentRow();
      this.$refs.searchUser.setCurrentRow();

    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleClick(tab){
      if(tab.label=="按部门"){
        this.loadNode(this.node,this.resolve);
        this.seen = true;
      }
      if(tab.label=="按角色"){
        this.$api.getRoleList({applicationid: this.detail.customAppsId},
        {
          onSucess: resp => {
            this.roleData = resp.data.data;
          }
        });
        this.seen = false;
      }
      if(tab.label=="查询"){
        this.searchall = true;
        this.searchTableData(this.searchall);
        this.searchall = false;
      }
    },
    
    roleuserRowClick(roleuser){
      this.checkUser[0]=roleuser;
      // this.onOk([roleuser]);
    },
    resetSearchTableData(){
      this.timer=new Date().getTime()
      this.searchdata={
        domainid: this.detail.domainsId,
        departmentid: "",
        currpage: 1,
        pagelines: 10,
        orderby: "",
        data:{
          searchWord: "",
        }
      };
      this.searchTableData();
    },
    deptuserRowClick(deptuser){
      if(this.type=='user' ){
        if(deptuser.status){
           this.checkUser[0]=deptuser;
        }else{
          this.$message({
              showClose: true,
              message: '当前用户失效，不可设置',
              type: "error",
            });
        }
      }else this.checkUser[0]=deptuser;
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        if(this.isFirst){
          this.isFirst=false;
          this.node=node;
          this.resolve=this.resolve;
        }
        this.$api.getRootDepartment(this.detail.domainsId, {
          onSucess: resp => {
            let rootDepartment = resp.data.data;
            resolve([rootDepartment]);
            this.defaultExpandedKeys.push(rootDepartment.id);
          }
        });
      }
      if (node.level >= 1) {
        this.$api.getSubDepartmentNodes(this.detail.domainsId, node.key,1, {
          onSucess: resp => {
            let subdepts = resp.data.data;
            resolve(subdepts);
          }
        });
      }
    },
    onNodeClick(dept) {
      this.searchdata.departmentid = dept.id;
      this.searchTableData(this.searchall);
      this.seen = true;
    },
    handleSizeChange(size){
      this.searchdata.pagelines=size;
      this.searchTableData(this.searchall);
    },
    searchTableData(searchall) {
      this.searchdata.domainid = this.detail.domainsId;
      this.searchdata.data.roleid = "";
      if(searchall == true){
          this.searchdata.departmentid = "";
      }
      this.$api.getUsers(this.searchdata, {
        onSucess: resp => {
          this.tableData = resp.data.data;
        }
      });
    },

    roleRowClick(row){
      this.searchdata.data.roleid = row.roleId;
      this.searchTableDatabyRole();
      this.seen = true;
    },
    roleUserSizeChange(size){
      this.searchdata.pagelines=size;
      this.searchTableDatabyRole();
    },
    searchTableDatabyRole() {
      this.searchdata.domainid = this.detail.domainsId;
      this.$api.getUserListbyRole(this.searchdata, {
        onSucess: resp => {
          this.tableDatabyRole = resp.data.data;
        }
      });
    },
  }

};
</script>

<style>


</style>